<template>
  <div class="wrap" v-loading.lock="fullscreenLoading">
    <Form
      @search="search"
      :showCk="true"
      :keyWords="keyWords"
      :options="options"
    />
    <div class="table-container">
      <div class="tab-container">
        <Tabs
          :options.sync="options"
          :activeName.sync="activeName"
          @switchTab="switchTab"
          :loading.sync="fullscreenLoading"
          :informUpdate="informUpdate"
          v-show="!options.length < 1"
        />
      </div>
      <Table
        :tableData="sortList"
        :tableLabel="tableLabel"
        :border="true"
        :handleOperaView="handleOperaView"
        :handleOperaBrowse="handleOperaBrowse"
        :handleSelectionChange="handleSelectionChange"
      />
      <HeaderSelector
        class="selector"
        :tableLabel="filterLabels"
        v-show="!tableLabel.length < 1"
      />
      <PopMessage :showPop.sync="showPop" :rowInfo="rowInfo" />
    </div>
  </div>
</template>

<script>
import Form from "./Form";
import Tabs from "./Tabs";
import Table from "@/components/Tables";
import HeaderSelector from "./HeaderSelector";
import { search, searchByRow } from "@/api/search/complex";
import PopMessage from "./PopMessage";

export const operator = {
  isOpera: true,
  label: "操作",
  width: "",
  prop: "",
  showView: true,
  showBrowse: true,
  fullscreenLoading: false,
};

export default {
  name: "complexTable",
  props: {
    options: {
      type: Array,
    },
    keyWords: {
      type: String,
    },
    sortList: {
      type: Array,
      default: () => []
    },
    tableLabel: {
      type: Array,
      default: () => []
    },
    headerUpdate: {
      type: Boolean
    }
  },
  data () {
    return {
      activeName: "",
      labels: [],
      showPop: false,
      rowInfo: {},
      filterLabels: [],
      fullscreenLoading: false,
      informUpdate: false,
      keyWordsFromDialog: ""
    };
  },
  components: {
    Table,
    Form,
    Tabs,
    HeaderSelector,
    PopMessage,
  },
  methods: {
    search (selectedObj, keyWords) {
      this.$emit("update:options", selectedObj);
      this.$emit("search", selectedObj, keyWords);
      this.keyWordsFromDialog = keyWords
    },
    //切换标签时发送请求，更新table数据
    switchTab (tab, tabPane) {
      this.$emit("update:tableLabel", []);
      this.$emit("update:sortList", []);
      this.filterLabels = [];
      search(tab, this.keyWords ? this.keyWords : this.keyWordsFromDialog)
        .then((res) => {
          let tableLabel = res.rows[0];
          tableLabel.forEach((item) => {
            item.label = item.fieldAlias;
            item.prop = item.fieldName;
          });
          tableLabel.push(operator);
          this.labels = tableLabel;
          this.filterLabels = tableLabel;
          this.$emit("update:tableLabel", tableLabel);
          this.$emit("update:sortList", res.rows[1]);
          this.activeName = tabPane;
          this.informUpdate = false;
        })
        .finally(() => (this.fullscreenLoading = false));
    },
    //请求table中每行所需数据，并打开“查看”弹框
    handleOperaView (row) {
      this.fullscreenLoading = true;
      this.rowInfo = {};
      searchByRow(row.recNo)
        .then((res) => {
          if (res.code === 200) {
            this.rowInfo = res.data;
            this.showPop = true;
            this.fullscreenLoading = false;
          }
        })
        .finally(() => (this.fullscreenLoading = false));
    },
    //打开“浏览”弹框
    handleOperaBrowse (row) {
      const sortNo = row.sortNo;
      this.$router.push({
        path: "/system/img",
        query: {
          sortNo: sortNo
        },
      });
    },
    handleSelectionChange (selection) {
      this.$bus.$emit("selected", selection);
    }
  },
  watch: {
    //父组件通知更新过滤器
    headerUpdate () {
      this.filterLabels = this.tableLabel;
      this.activeName = this.options[0]?this.options[0].sortMainTableNo:null;
      this.labels = this.tableLabel;
    }
  },
  created () {
    this.filterLabels = this.tableLabel;
    this.activeName = this.options.length > 0 ? this.options[0].sortMainTableNo : null;
    this.labels = this.tableLabel;
    this.$bus.$on("tableFilter", (data) => {
      let labelArr = [];
      for (let index in data) {
        for (let i in this.labels) {
          if (data[index] === this.labels[i].label) labelArr[i] = this.labels[i];
        }
      }
      labelArr = labelArr.filter((item) => item);
      labelArr.push(operator);
      this.$emit("update:tableLabel", labelArr);
    });
  },
  beforeDestroy () {
    this.$bus.$off("tableFilter");
  },
};
</script>

<style scoped>
.wrap {
  padding: 20px 50px;
}
.table-container {
  position: relative;
  margin-top: 40px;
}
.tab-container {
  width: 90%;
}
.selector {
  position: absolute;
  right: 0;
  top: 3px;
}
</style>
